<template>
	<div style='height:100%;' ref='container'>
		<v-chart autoresize :option='options'></v-chart>
	</div>
</template>

<script lang="ts">
    import { use, registerMap } from "echarts/core";
	import {
		MapChart,
        ScatterChart,
        EffectScatterChart,
	} from 'echarts/charts'

    import {
        GeoComponent,
        VisualMapComponent,
    } from "echarts/components";

	use([
		MapChart,
        ScatterChart,
        EffectScatterChart,
        GeoComponent,
        VisualMapComponent,
	])

    import chinaMap from "./china.json";
    import worldMap from "./world.json";
    registerMap("china", chinaMap as any);
    registerMap("world", worldMap as any);

import { computed } from 'vue';

    interface Props {
        modelValue : any[]
    }

    export default {
        props : {
            modelValue : {
                type : Array,
                default : function(){
                    return []
                },
            }
        },
        setup(props:Props, context) {
            let options = computed(() => {
                var series:any[] = []
                let serie = {
                    type : 'effectScatter',
                    name : '告警',
                    coordinateSystem : 'geo',
                    // label: {
                    //     formatter: '{b}',
                    //     position: 'right',
                    //     show: true,
                    //     color : 'red'
                    // },
                    itemStyle: {
                        color: '#f3d302'
                    },
                    symbolSize: function (val) {
                        return 13
                        //return val[2] / 10;
                    },
                    data : []
                }


                props.modelValue?.forEach(item => {
                    if(item.longitude && item.latitude) {
                        serie.data?.push({itemStyle : { color : '#f3d302'}, value : [item.longitude, item.latitude, item]})
                    }

                })

                series.push(serie)

                var options = {
                    geo: {
                        map: 'china',
                        roam : true,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#1e242f',
                                borderColor: '#5479c6'
                            },
                            emphasis: {
                                areaColor: '#1e242f'
                            }
                        }
                    },

                    series: series
                }

                return options
            })

            return {
                options
            }
        }
    }
</script>